<template>
  <!-- 首页 -->
  <div class="home">
    <div class="banner wrap">
      <img src="@/assets/img/banner.f559b49d.png" alt="" />
    </div>
    <div class="content">
      <div class="wrap">
        <JfTitle title="精品推荐" :imgSrc="formImg.titImg1"></JfTitle>
        <List :arr="JigPinArr"></List>
        <JfTitle title="热门兑换" :imgSrc="formImg.titImg2"></JfTitle>
        <img
          style="margin: 10px 0 30px 0"
          src="@/assets/img/ad.4c6b6225.png"
          alt=""
        />
        <List :arr="ReMenArr"></List>
      </div>
    </div>
    <div class="wrap">
      <JfTitle title="积分攻略" :imgSrc="formImg.titImg3"></JfTitle>
      <ul class="jifen">
        <li :style="{ background: `url(${formImg.jifenImg1})` }">
          <h3>签到得鸡腿</h3>
          <div>去签到</div>
        </li>
        <li :style="{ background: `url(${formImg.jifenImg2})` }">
          <h3>购课得鸡腿</h3>
          <div>去购课</div>
        </li>
        <li :style="{ background: `url(${formImg.jifenImg3})` }">
          <h3>推荐得鸡腿</h3>
          <div>去推荐</div>
        </li>
        <li :style="{ background: `url(${formImg.jifenImg4})` }">
          <h3>做任务得鸡腿</h3>
          <div>做任务</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import JfTitle from "@/components/home/JfTitle.vue";
import List from "@/components/home/List.vue";
import { JingPinAPI, RenMenAPI } from "@/http/api";
import { reactive, ref } from "vue";
const formImg = reactive({
  titImg1: new URL("../assets/img/jingpin.png", import.meta.url).href,
  titImg2: new URL("../assets/img/hot.png", import.meta.url).href,
  titImg3: new URL("../assets/img/score.png", import.meta.url).href,
  jifenImg1: new URL("../assets/img/integral-01.9386d4bf.png", import.meta.url)
    .href,
  jifenImg2: new URL("../assets/img/integral-02.150d92a1.png", import.meta.url)
    .href,
  jifenImg3: new URL("../assets/img/integral-03.9870f3f1.png", import.meta.url)
    .href,
  jifenImg4: new URL("../assets/img/integral-04.afadcbdf.png", import.meta.url)
    .href,
});

const JigPinArr = ref<IProductList[]>([]);
const ReMenArr = ref<IProductList[]>([]);
//发请求，请求数据 精品 热门
JingPinAPI().then((res) => {
  if (res.code === 0) {
    JigPinArr.value = res.data.data.records;
    JigPinArr.value = JigPinArr.value.filter((item, index) => {
      return index < 4;
    });
  }
});
RenMenAPI().then((res) => {
  if (res.code === 0) {
    ReMenArr.value = res.data.data.records;
    ReMenArr.value = ReMenArr.value.filter((item, index) => {
      return index < 4;
    });
  }
});
</script>

<style lang="less" scoped>
.banner {
  padding-bottom: 30px;
}
.content {
  background-color: #f5f5f5;
  padding-bottom: 30px;
}
.jifen {
  display: flex;
  justify-content: space-between;
  padding-bottom: 30px;
  li {
    width: 285px;
    height: 168px;
    color: #fff;
    padding: 20px 10px;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-size 0.4s linear;
    background-size: 100% 100%;
    &:hover {
      background-size: 105% 105%;
    }
    h3 {
      font-size: 24px;
      margin-bottom: 19px;
    }
    div {
      width: 96px;
      height: 27px;
      border: 1px solid #ffffff;
      text-align: center;
      line-height: 27px;
    }
  }
}
</style>
